<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>营业额</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="../js/use_rem.js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        section{
              padding-left: 4%;
              padding-right:4%;
              width: 92%;
              height: 55rem;
              overflow-y: scroll;
              box-shadow: 0 0 0 0 #333333;
        }
       footer{
           height:2.45rem;
       }
        footer div{
            width: 50%;
            text-align: center;
            height: 5rem;
            line-height: 5rem;
            background-color: #fa4644;
            box-shadow: #fa3c3c 3px 6px;
            color: #FFFFFF;
            font-size: 1.5rem;
        }
        .active_bot{
            background-color: #dd3838;
        }
        .circle{
            width: 0.9rem;
            height: 0.9rem;
            background-color: #fa504c;
            border-radius: 50%;
            margin-bottom: 0.1rem;
            margin-right: 2.7%;
        }
        .wrap_msg_header{
            padding-top: 2.5rem;
            padding-bottom: 1.5rem;
        }
        .d_p_l{
            display: inline-block;
        }
        .date{
            font-size: 1.8rem;
        }
        .main_wrap{
            height: 55rem;
        }
        .main_box{
            width: 100%;
            height: 8.4rem;
            background-color: #fff;
            border-radius: 2vw;
            box-shadow: rgba(216, 230, 246, 0.18) 0 4px 30px 10px
        }
        .delete{
            width: 23%;
            background-color: #fa4342;
            height: 100%;
            border-radius:  0 2vw 2vw 0;
        }
        .show_det{
              width: 76%;
            height: 100%;
        }
        .delete img {
            display: block;
            width: 28%;
            margin:  2.2rem auto 0.6rem;
        }
        .delete p{
            width: 100%;
            font-size: 18px;;
            text-align: center;
            color: #FFFFFF;
        }
        .show_det_name{
            font-size: 1.8rem;
            margin-top: 1.5rem;
        }
        .m_l_70{
            margin-left: 12%;
        }
        .m_l_30{
            margin-left: 6%;
        }
        .show_det_d img{
            width: 20%;
            vertical-align: middle;
        }
        .show_det_d{
            margin-top: 1.5rem;
            font-size: 1.2rem;
            color: #adadad;
        }
        .wrap{
            background-color: #e3eaf6;
        }
        .hidden{
            display: none;
        }
        .upload{
         box-shadow: 0 0 20px 8px #dbdbdb;
        }
        /*upload s*/
        .upload_container{
          /*width: 98%;*/
          height:51.5rem;
          background-color: #FFFFFF;
          margin: 2rem auto 0;
          border-radius:0.5rem ;
            box-shadow: 0 0 10px 20px rgba(216, 230, 246, 0.32);
        }
        .upload_header{
            height: 6rem;
            line-height: 6rem;
            border-bottom: 2px solid #eff0f1;
            width: 92%;
            margin: 0 auto;
            font-size: 1.8rem;
            color: #333333;

        }
        .upload_list{
            color: #adadad;
            font-size: 1.6rem;
            margin-left: 12%;
            margin-top: 3.2rem;
        }
        .upload_list input{
            width: 50%;
            height: 3.8rem;
            line-height: 3.8rem;
            background-color: #eff0f1;
            border: 0;
            margin-right: 7%;
        }
        .input_name{
            margin-right: 7%;
        }
        .upload_list_2{
            margin-top: 2.1rem;
            margin-bottom: 3.2rem;
        }
        .submit_bt{
            width: 30%;
            height: 4.25rem;
            line-height: 4.25rem;
            text-align: center;
            color: #fff;
            font-size: 1.6rem;
            margin:  0 auto;
            background-color: #fa3e3d;
            border-radius: 2rem;
         }
        /*upload e*/
        .upload_btn_add{
            margin-left: 10%;
        }
        .submit_btn{
            margin-right: 10%;
        }

    </style>
</head>
<body>
<div class="wrap ">
    <section class="main_wrap record">
    <ul class="wrap_msg hidden">
        <li class="wrap_msg_header">
            <div class="circle d_p_l"></div>
            <div class="date d_p_l">
                7月3日
            </div>
        </li>
        <li class="main_box">
            <div class="f_L show_det ">
                <div class="f_L m_l_30">
                    <p class="show_det_name">
                        烧腊档口
                    </p>
                    <div class="show_det_d">
                        <img src="../img/date.png" alt=""> 7月3日
                    </div>
                </div>
                <div class="f_L m_l_70">
                    <p class="show_det_name">
                        +5000元
                    </p>
                    <div class="show_det_d">
                        <img src="../img/time.png" alt=""> 7月3日
                    </div>
                </div>
            </div>
            <div class="delete f_R">
                <img src="../img/del.png" alt="">
                <p>删除</p>
            </div>
        </li>
    </ul>
    <div class="upload ">
       <div class="upload_container">
            <div class="top">
                <div class="top_header upload_header">
                    烧腊档口
                </div>
                <ul>
                    <li class="upload_list">
                        <span class="input_name">卡机</span>
                        <input type="text">
                        <span>元</span>
                    </li>
                    <li class="upload_list upload_list_2">
                        <span class="input_name">饭票</span>
                        <input type="text">
                        <span>元</span>
                    </li>
                </ul>
            </div>
           <div class="bottom">
               <div class="bottom_header upload_header">
                   蒸饭档口
               </div>
               <ul>
                   <li class="upload_list">
                       <span class="input_name">卡机</span>
                       <input type="text">
                       <span>元</span>
                   </li>
                   <li class="upload_list upload_list_2">
                       <span class="input_name">饭票</span>
                       <input type="text">
                       <span>元</span>
                   </li>
               </ul>
           </div>
               <div class="submit_bt f_L upload_btn_add">
                   上传
               </div>
               <div class="submit_bt f_R submit_btn" >
                   提交
               </div>
       </div>
    </div>
</section>
    <footer>
         <div class="f_L upload_btn active_bot">
           上传
         </div>
         <div class="f_L  record_btn">
           记录
         </div>
    </footer>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(".upload_btn").on("click",function () {
        $(".active_bot").removeClass("active_bot")
        $(this).addClass("active_bot")
        $(".upload").removeClass("hidden")
        $(".wrap_msg").addClass("hidden");
    })
    $(".record_btn").on("click",function () {
        $(".active_bot").removeClass("active_bot")
        $(this).addClass("active_bot")
        $(".upload").addClass("hidden")
        $(".wrap_msg").removeClass("hidden")
    })
</script>
</html>